{% extends "base_mobile.html" %}

{% block title %}
CMAT 21 - Ring {{ring.number}}
{% endblock title %}

{% block heading %}
Ring {{ring.number}}
{% endblock heading %}

{% block ring_li %}class="ui-btn-active"{% endblock %}

{% block content %}
<ul data-role="listview">
{% if current_events %}
<li data-role="list-divider">Current event</li>
{% for event in current_events %}
  <li><a href="/event/{{event.shortcode}}">
    <h3 class="ul-li-heading">{{event.shortcode}}</h3>
    <p><strong>{{event.level.name}} - {{event.gender.name}} - {{event.age_group.name}}</strong></p>
    <p>{{event.event_type.name}}</p>
    <p class="ui-li-count">{{event.num_competitors}}</p>
  </a></li>
{% endfor %}
{% endif %}
{% if future_events %}
<li data-role="list-divider"><h2>Upcoming events</h2></li>
{% for event in future_events %}
  <li><a href="/event/{{event.shortcode}}">
    <h3 class="ul-li-heading">{{event.shortcode}}</h3>
    <p><strong>{{event.level.name}} - {{event.gender.name}} - {{event.age_group.name}}</strong></p>
    <p>{{event.event_type.name}}</p>
    <p class="ui-li-count">{{event.num_competitors}}</p>
  </a></li>
{% endfor %}
{% endif %}
<li data-role="list-divider"><h2>Finished events</h2></li>
{% for event in previous_events %}
  <li><a href="/event/{{event.shortcode}}">
    <h3 class="ul-li-heading">{{event.shortcode}}</h3>
    <p><strong>{{event.level.name}} - {{event.gender.name}} - {{event.age_group.name}}</strong></p>
    <p>{{event.event_type.name}}</p>
    <p class="ui-li-count">{{event.num_competitors}}</p>
  </a></li>
{% endfor %}
</ul>
{% endblock content %}
